<template>
    <div class='content'>
        <div class="profile_page">
                <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
        </div>
         <Calendar
            v-on:choseDay="clickDay"
            v-on:changeMonth="changeDate"
            :workDatas="workData1"></Calendar>
          <div class="checkingType flex">
              <!--<div>
                  <span class="duty type"></span>
                  <span>出勤</span>
              </div>
              <div>
                  <span class="abnormal type"></span>
                  <span>非正常考勤</span>
              </div>
              <div>
                  <span class="absence type"></span>
                  <span>缺勤</span>
              </div>
              <div>
                  <span class="rest type"></span>
                  <span>休息</span>
              </div>-->
            <div>
              <span class="duty type"></span>
              <span>正常</span>
            </div>
            <div>
              <span class="abnormal type"></span>
              <span>异常</span>
            </div>
            <div>
              <span class="absence type"></span>
              <span>请假</span>
            </div>
            <div>
              <span class="rest type"></span>
              <span>出差</span>
            </div>
            <div>
              <span class="rest1 type"></span>
              <span>外出</span>
            </div>
           <!-- <div>
              <span class="rest type"></span>
              <span>休息</span>
            </div>
            <div>
              <span class="rest type"></span>
              <span>非正常出勤</span>
            </div>-->
            </div>
            <div class="calendarBottom">
                <titlebar :title-left='titleLeft' :title-right='titleRight'></titlebar>
                <div class="flex">
                    <div class="flex" v-if="twoOrFour">
                        <div class="flex"><span>开始状态</span><span>{{datas.clockTime}}</span></div>
                        <div class="flex"><span>结束状态</span><span>{{datas.clockTimeLast}}</span></div>
                    </div>
                    <div class="flex" v-else>
                      <div class="flex"><span>开始状态(上午)</span><span>{{datas.clockTime}}</span></div>
                      <div class="flex"><span>结束状态(上午)</span><span>{{datas.clockTimeLast}}</span></div>
                      <div class="flex"><span>开始状态(下午)</span><span>{{datas.clockTime2}}</span></div>
                      <div class="flex"><span>结束状态(下午)</span><span>{{datas.clockTimeLast2}}</span></div>
                    </div>
                    <div style="padding-left:2rem;">
                        <van-button type="info" to="/alter">申请变更</van-button>
                    </div>
                </div>
            </div>

        <!-- <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition> -->
    </div>
</template>

<script>
    import headTop from '@/components/header/head'
    import Calendar from '@/components/calendar/calendar';
    import titlebar from '@/components/titlebar3/titlebar3';
    import {selfAttendanceTypeNew,selfAttendance,sysTime} from '@/service/getData';
    import {getStore,getDefault} from '@/assets/config/mUtils';
    export default {
    	data(){
            return{
                profiletitle:'我的考勤',
                goBack:true,
                titleLeft:'考勤记录',
                titleRight:'',
                workData1:[],
                twoOrFour:true,
                datas:{
                  clockTime:'',
                  clockTimeLast:'',
                  clockTime2:'',
                  clockTimeLast2:'',
                },
            }
        },
        created(){

        },
        mounted(){
            var data = getDefault();
            sysTime(data).then(res=>{
              var sysTimes = res.data;
              var workData = {};
              var clickdata = {};
              workData.appUserId = getStore('user_id');
              workData.app_userId = getStore('user_id');
              workData.CHECK_TIME = new Date().getTime().toString();
              workData.CHECK_SIGN = this.$md5(workData.app_userId + workData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");

              clickdata.appUserId = getStore('user_id');
              clickdata.app_userId = getStore('user_id');
              clickdata.CHECK_TIME = new Date().getTime().toString();
              clickdata.CHECK_SIGN = this.$md5(clickdata.app_userId + clickdata.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");

              // var date = new Date(this.sysTimes);
              workData.atndDate = sysTimes.substring(0,7);
              clickdata.atndDate = sysTimes.substring(0,10);
              this.titleRight = sysTimes.substring(0,10);
              //workData.atndDate ='2019-07';
              selfAttendanceTypeNew(workData).then(res=>{
//                console.log(res.data.data);
                this.workData1 = res.data.data;
              });
              selfAttendance(clickdata).then(res=>{
                console.log(res)
                var ifFourCard = res.data.ifFourCard;
                if(!ifFourCard){
                  var signTime = res.data.SIGNINTIME;
                  var sigOutTime = res.data.SIGNOUTTIME;
                  if(signTime.replace("-","/") == sigOutTime.replace("-","/")){
                    this.datas.clockTime = signTime;
                    this.datas.clockTimeLast = '';
                  }else {
                    this.datas.clockTime = signTime;
                    this.datas.clockTimeLast = sigOutTime;
                  }
                }else {
                  this.twoOrFour = false;
                  var clockTime = res.data.SIGNINTIME;
                  var clockTimeLast = res.data.SIGNOUTTIME;
                  var clockTime2 = res.data.SIGNINTIME2;
                  var clockTimeLast2 = res.data.SIGNOUTTIME2;
                  if(clockTime.replace("-","/") == clockTimeLast.replace("-","/")){
                    this.datas.clockTime = clockTime;
                    this.datas.clockTimeLast = '';
                  }else {
                    this.datas.clockTime = clockTime;
                    this.datas.clockTimeLast = clockTimeLast;
                  };
                  if(clockTime2.replace("-","/") == clockTimeLast2.replace("-","/")){
                    this.datas.clockTime2 = clockTime2;
                    this.datas.clockTimeLast2 = '';
                  }else {
                    this.datas.clockTime2 = clockTime2;
                    this.datas.clockTimeLast2 = clockTimeLast2;
                  };
                }
              })
            });

        },
        props: ['imgSrc', 'menuTitle'],
        components:{
            headTop,
            Calendar,
            titlebar
        },
        methods:{
            addZero(num){
              var addNum = num<10?"0"+num:num;
              return addNum;
            },
            clickDay(data) {
//                console.log(data); //选中某天
              var clickdata = {};
              var workDate =  new Date(data);
              var clickDate = workDate.getFullYear() + '-'+ this.addZero(workDate.getMonth()+1)+ '-'+  this.addZero(workDate.getDate());
                this.titleRight = clickDate;
              clickdata.atndDate = clickDate;
              clickdata.appUserId = getStore('user_id');
              clickdata.app_userId = getStore('user_id');
              clickdata.CHECK_TIME = new Date().getTime().toString();
              clickdata.CHECK_SIGN = this.$md5(clickdata.app_userId + clickdata.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
              this.datas.clockTime = '';
              this.datas.clockTimeLast = '';
              this.datas.clockTime2 = '';
              this.datas.clockTimeLast2 = '';
              selfAttendance(clickdata).then(res=>{
//                  console.log(res)
                  var ifFourCard = res.data.ifFourCard;
                  var clockTime = res.data.SIGNINTIME;
                  var clockTimeLast = res.data.SIGNOUTTIME;
                  if(!ifFourCard){
                    if(clockTime.replace("-","/") == clockTimeLast.replace("-","/")){
                      this.datas.clockTime = clockTime;
                      this.datas.clockTimeLast = '';
                    }else {
                      this.datas.clockTime = clockTime;
                      this.datas.clockTimeLast =clockTimeLast;
                    }
                  }else {
                    var clockTime = res.data.SIGNINTIME;
                    var clockTimeLast = res.data.SIGNOUTTIME;
                    var clockTime2 = res.data.SIGNINTIME2;
                    var clockTimeLast2 = res.data.SIGNOUTTIME2;
                    if(clockTime.replace("-","/") == clockTimeLast.replace("-","/")){
                      this.datas.clockTime = clockTime;
                      this.datas.clockTimeLast = '';
                    }else {
                      this.datas.clockTime = clockTime;
                      this.datas.clockTimeLast = clockTimeLast;
                    };
                    if(clockTime2.replace("-","/") == clockTimeLast2.replace("-","/")){
                      this.datas.clockTime2 = clockTime2;
                      this.datas.clockTimeLast2 = '';
                    }else {
                      this.datas.clockTime2 = clockTime2;
                      this.datas.clockTimeLast2 = clockTimeLast2;
                    };
                  }


                })
                },
            changeDate(data) {
               // console.log(new Date(data),"1111"); //左右点击切换月份
              var subdate = new Date(data);
              var workData = {};
            /*  workData.appUserId = getStore('user_id');*/
              workData.appUserId = getStore('user_id');
              workData.app_userId = getStore('user_id');
              workData.CHECK_TIME = new Date().getTime().toString();
              workData.CHECK_SIGN = this.$md5(workData.app_userId + workData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");

              workData.atndDate =subdate.getFullYear() + '-'+((subdate.getMonth()+1)<10?"0"+(subdate.getMonth()+1):(subdate.getMonth()+1));
                //workData.atndDate ='2019-07';
                selfAttendanceTypeNew(workData).then(res=>{
                  this.workData1 = res.data.data;
                });
                },
        }
    }

</script>

<style lang="scss" scoped>
    @import '../../assets/style/mixin';
    @import '../../assets/style/public';
       .router-slid-enter-active, .router-slid-leave-active {
        transition: all .4s;
    }
    .router-slid-enter, .router-slid-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }
    .content{
        height: 100%;
    }
    .calendarBottom{
        background: #fff;
        >.flex{
            justify-content: space-between;
            padding:0 .54rem .5rem;
            align-items: center;
            >.flex{
                flex-direction: column;
                padding:0 .5rem;
                display: block;
                flex-grow: 2;
                >.flex{
                    justify-content: space-between;
                    flex-grow: 2;
                     span{
                        font-size: .48rem;
                        line-height: 1.5rem;
                        height: 1.5rem;
                        color: #666;
                    }
                }

            }
            .van-button{
                height: 1rem;
                line-height: .8rem;
                font-size: .36rem;
                padding: 0 .5rem;
            }
        }
    }
    .checkingType{
        height: 2.4rem;
        justify-content: space-around;
        align-items: center;
        background: #fff;
        border-top: 1px solid #f5f5f5;
        >div{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        span{
            @include sc(.48rem,#999);
            &.type{
                display: inline-block;
                margin: 0 auto .24rem;
                @include wh(.6rem,.6rem);
                background-color: #a5db58;
                border-radius: 50%;
            }
            &.abnormal{
                	background-color: #ffbcbc;
            }
            &.absence{
                	background-color: #ffe4aa;
            }
            &.rest{
              background-color: #b4e4ff;
            }
            &.rest1{
              background-color: #c0b8ff;
            }
        }
    }
</style>
